import React from 'react'
import {
  View, Caption, Text, Divider,Tile, Button, Icon
} from '@shoutem/ui'
import FavoriteDetail from './FavoriteDetail'

const FavoriteBottom = (props) => {
  const {isFavorited, isLiked, data, onFavoritePress, onLikePress } = props
  let favoriteStyleName = isFavorited ? "full-width" : "full-width muted"
  let likeStyleName = isLiked ? "full-width" : "full-width muted"
  return (
    <View styleName="horizontal">
      <Button
        styleName={favoriteStyleName}
        onPress={() => {
          onFavoritePress(data, isFavorited)
        }
      }
      >
        <Icon name="add-to-favorites-full" />
        <Text>收 藏</Text>
      </Button>
      <Button
        styleName={likeStyleName}
        onPress={() => {
          onLikePress(data, isLiked)
        }}
      >
        <Icon name="like" />
        <Text>点 赞</Text>
      </Button>
    </View>
  )
}

const TextPost = (data) => {
  const post = data.hasOwnProperty('time') ? data.post : data
  const { username, ctime, text, id}  = post
  return (
    <Divider styleName="section-header" >
      <Tile>
        <View styleName="content">
          <View styleName="horizontal space-between">
            <Caption>{username}</Caption>
            <Caption>{ctime}</Caption>
          </View>
        </View>
        <View styleName="content">
          <Text styleName="multiline">{text}</Text>
        </View>
        {
          data.hasOwnProperty('time') ?
          <FavoriteDetail {...data}/> :
          <FavoriteBottom {...data} data={post}/>
        }
      </Tile>
    </Divider>
  )
}

export default TextPost
{/* <Row>
  <View styleName="vertical">

    <Text styleName="multiline">{text}</Text>
    <View styleName="content">
      <View styleName="horizontal space-between">
        <Caption>{username}</Caption>
        <Caption>{ctime}</Caption>
      </View>
    </View>
  </View>
</Row>  */}
